<script setup lang='ts'>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { useRoute } from 'vue-router';

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const route = useRoute()
console.log(route.query);

const data = ref({})
data.value = route.query

const tableData = ref([])

</script>

<template>
    <div style='width: 100%;padding: 40px'>
        <el-tabs v-model="activeName" class="demo-tabs" @tabclick="handleClick">
            <el-tab-pane label="学生信息" name="first">

                <table  align='center' width='100%' class='stuTable'>
                    <tr>
                        <td colspan='6' style='text-align: left;background-color: #fafafa;'><b>学生信息</b></td>
                    </tr>
                    <tr>
                        <td class='grey'>姓名</td>
                        <td class='content'>{{ data.name }}</td>
                        <td class='grey'>性别</td>
                        <td class='content'>{{ data.gender }}</td>
                        <td class='grey'>生日</td>
                        <td class='content'>{{ data.birthday }}</td>
                    </tr>
                    <tr>
                        <td class='grey'>学历</td>
                        <td class='content'>{{ data.education }}</td>
                        <td class='grey'>班级</td>
                        <td class='content'> {{ data.className }}</td>
                        <td class='grey'>学号</td>
                        <td class='content'>{{ data.stuNum }}</td>
                    </tr>
                    <tr>
                        <td class='grey'>手机号码</td>
                        <td class='content'>{{ data.phoneNumber }}</td>
                        <td class='grey'>入学时间</td>
                        <td class='content' colspan='2'>{{ data.createTime }}</td>
                        <td class='content'></td>
                    </tr>
                    <tr>
                        <td class='grey'>心理普测结果</td>
                        <td class='content'>{{ data.psychometricTest }}</td>
                        <td class='grey'>既往病史</td>
                        <td class='content'>{{ data.anamnesis }}</td>
                        <td class='grey'>心理诊断经历</td>
                        <td class='content'>{{ data.experience }}</td>
                    </tr>
                    <tr>
                        <td class='grey'>服药情况</td>
                        <td class='content'>{{ data.medicationSituation }}</td>
                        <td class='grey'>家庭情况</td>
                        <td class='content'>{{ data.familyInfo }}</td>
                        <td class='grey'>其他</td>
                        <td class='content'>{{ data.remark }}</td>
                    </tr>
                </table>

            </el-tab-pane>

            <el-tab-pane label="预约信息" name="second">
                <el-empty description="暂无预约信息" />
            </el-tab-pane>

            <el-tab-pane label="测评记录" name="third">

                <el-table :data="tableData" border style="width: 100%" align='center'>
                    <el-table-column type='index' label='序号' width="80" align='center'/>
                    <el-table-column prop="name" label="测试名称" width="280" align='center' />
                    <el-table-column prop="address" label="分数" width='280' align='center' />
                    <el-table-column prop="address" label="测评结果" align='center' />
                    <el-table-column prop="address" label="测评时间" align='center' />
                </el-table>

            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped lang='scss'>
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.stuTable {
    //background-color: #fafafa;
    padding: 10px;
    border: 1px solid #e6ebf5;
    border-bottom: 0;
    margin-bottom: 0;
    text-align: center;

    td,th {
        height: 20px;
        line-height: 20px;
        padding: 10px;
        border: 1px solid #e6ebf5;
    }
    th {
        text-align: left !important;
        background-color: #fafafa;
    }
}

.grey {
    background-color: #fafafa;
    color: #909399;
    font-size: 14px;
}

.content {
    font-size: 14px;
    color: #606266;
    background-color: #fff;
}
</style>
